<template>
  <el-container class="content">
    <el-form class="change-pass-form">
      <el-form-item class="pass-form-item">
        <el-text class="form-item-text">旧密码：</el-text>
        <el-input
            class="form-item-input"
            v-model="passForm.oldPass"
            placeholder="请输入旧密码"
            show-password
        />
      </el-form-item>
      <el-form-item class="pass-form-item">
        <el-text class="form-item-text">新密码：</el-text>
        <el-input
            class="form-item-input"
            v-model="passForm.newPass"
            placeholder="请输入新密码"
            show-password
        />
      </el-form-item>
      <el-form-item class="pass-form-item">
        <el-text class="form-item-text">确认密码：</el-text>
        <el-input
            class="form-item-input"
            v-model="passForm.confirmPass"
            placeholder="请再次输入新密码"
            show-password
        />
      </el-form-item>
      <el-form-item class="pass-form-item-button">
        <el-button style="margin-left: auto;background-color: #04c1a5;border: 0" type="primary" @click="onSubmit">确认</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script setup>
import {ref} from "vue";
import admin from "@/api/admin.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {useAuthStore} from "@/stores/auth.js";
import router from "@/router/index.js";
const authStore = useAuthStore();
const passForm = ref({
  username: authStore.username,
  oldPass: '',
  newPass: '',
  confirmPass: '',
})
const onSubmit = ()=>{
  if (passForm.value.newPass !== passForm.value.confirmPass){
    ElMessageBox.alert( '请检查两次密码是否相同！','提示', {
      type: 'error',
      confirmButtonText: 'OK',
    });
  } else if (passForm.value.oldPass !== '' && passForm.value.username !== ''){
    const dto = {
      username: passForm.value.username,
      oldPass: passForm.value.oldPass,
      newPass: passForm.value.confirmPass,
    }
    admin.updatePass(dto).then((res)=>{
      if (res.data.code === 200){
        ElMessageBox.alert( '操作成功，请重新登录','提示', {
          type: 'success',
          confirmButtonText: 'OK',
        });
        authStore.clearAuth();
        router.push('/login')
      }else{
        ElMessageBox.alert( res.data.msg, '提示',{
          type: 'error',
          confirmButtonText: 'OK',
        });
      }
    }).catch((err)=>{
      ElMessage.error("出错了，请重试");
      console.log(err);
    })
  }else{
    ElMessage.error("请正确输入")
  }
}
</script>
<style scoped>
.content{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.change-pass-form{
  border-radius: 10px;
  width: 40%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pass-form-item{
  width: 100%;
  height: 10%;
}
.form-item-text{
  font-size: 18px;
  font-weight: bolder;
  margin-left: auto;
}
.form-item-input{
  width: 70%;
  margin-right: auto;
}
.pass-form-item-button{
  width: 80%;
}
</style>